<template>
  <div class="index">
    <div class="header-container">
      <div class="header flex">
        <div class="header-left">
          <a href="">请登录</a> |
          <a href="">免费注册</a>
        </div>
        <div class="header-right">
          <router-link to="/my">我的驴妈妈</router-link> |
          <a >积分商城</a> |
          <a >会员俱乐部</a> |
          <a >国内:1010-6060</a>
        </div>
      </div>
    </div>

    <div class=" advert"></div>

    <div class="search flex">
      <div>
        <img src="../../static/images/1.png" alt="Lvmama"/>
      </div>
      <div class="flex-center">
        <input type="text" placeholder="请搜索景点" />
      </div>
      <div>
        <span class="span1"></span>
        <span class="span2"></span>
        <span class="span3"></span>
        <span class="span4"></span>
      </div>
    </div>

    <div class="change-back">
      <div class="change-back-top">
        <div class="nav-bar">
          <a>首页</a>
        </div>
      </div>
      <div class="chang-back-body">
        <div class="cbd-content">
          <div class="cbd-login">
            <table>
              <tr>
                <td colspan="2" >
                  <span class="cbd-title">用户登录</span>
                </td>
              </tr>
              <tr>
                <td>用户名：</td>
                <td><input type="text" placeholder="请输入用户名" v-model="username" /></td>
              </tr>
              <tr>
                <td>密码：</td>
                <td><input type="text" placeholder="请输入密码" v-model="password"/></td>
              </tr>
              <tr>
                <td colspan="2">
                  <button @click="login">登录</button>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>

    </div>

    <div class="places">
      <div class="lis">
        <ul>
          <li>9.27必抢</li>
          <li>自驾340起</li>
          <li>亲子游</li>
          <li>国庆特惠</li>
        </ul>
      </div>
      <div class="places-list">

        <div class="flex-shell">
          <router-link to="/details">
            <img src="images/2.jpg" width="210" height="150" alt="" />
          </router-link>

          <div class="pc-type">
            <span>自由行 |</span>
            <span>宜兴2天一夜</span>
          </div>
          <div class="pc-details clearfix">
            <span>￥50</span>
            <button>立即订购</button>
          </div>
        </div>

        <div class="flex-shell">
          <img src="images/2.jpg" width="210" height="150" alt="" />
          <div class="pc-type">
            <span>自由行 |</span>
            <span>宜兴2天一夜</span>
          </div>
          <div class="pc-details clearfix">
            <span>￥50</span>
            <button>立即订购</button>
          </div>
        </div>

        <div class="flex-shell">
          <img src="images/2.jpg" width="210" height="150" alt="" />
          <div class="pc-type">
            <span>自由行 |</span>
            <span>宜兴2天一夜</span>
          </div>
          <div class="pc-details clearfix">
            <span>￥50</span>
            <button>立即订购</button>
          </div>
        </div>

        <div class="flex-shell">
          <img src="images/2.jpg" width="210" height="150" alt="" />
          <div class="pc-type">
            <span>自由行 |</span>
            <span>宜兴2天一夜</span>
          </div>
          <div class="pc-details clearfix">
            <span>￥50</span>
            <button>立即订购</button>
          </div>
        </div>

        <div class="flex-shell">
          <img src="images/2.jpg" width="210" height="150" alt="" />
          <div class="pc-type">
            <span>自由行 |</span>
            <span>宜兴2天一夜</span>
          </div>
          <div class="pc-details clearfix">
            <span>￥50</span>
            <button>立即订购</button>
          </div>
        </div>
        <div class="flex-shell">
          <img src="images/2.jpg" width="210" height="150" alt="" />
          <div class="pc-type">
            <span>自由行 |</span>
            <span>宜兴2天一夜</span>
          </div>
          <div class="pc-details clearfix">
            <span>￥50</span>
            <button>立即订购</button>
          </div>
        </div>

        <div class="flex-shell">
          <img src="images/2.jpg" width="210" height="150" alt="" />
          <div class="pc-type">
            <span>自由行 |</span>
            <span>宜兴2天一夜</span>
          </div>
          <div class="pc-details clearfix">
            <span>￥50</span>
            <button>立即订购</button>
          </div>
        </div>

        <div class="flex-shell">
          <img src="images/2.jpg" width="210" height="150" alt="" />
          <div class="pc-type">
            <span>自由行 |</span>
            <span>宜兴2天一夜</span>
          </div>
          <div class="pc-details clearfix">
            <span>￥50</span>
            <button>立即订购</button>
          </div>
        </div>

        <div class="flex-shell">
          <img src="images/2.jpg" width="210" height="150" alt="" />
          <div class="pc-type">
            <span>自由行 |</span>
            <span>宜兴2天一夜</span>
          </div>
          <div class="pc-details clearfix">
            <span>￥50</span>
            <button>立即订购</button>
          </div>
        </div>

        <div class="flex-shell">
          <img src="images/2.jpg" width="210" height="150" alt="" />
          <div class="pc-type">
            <span>自由行 |</span>
            <span>宜兴2天一夜</span>
          </div>
          <div class="pc-details clearfix">
            <span>￥50</span>
            <button>立即订购</button>
          </div>
        </div>

      </div>

    </div>
  </div>

</template>
<script>
  export default {
    name:'index',
    data(){
      return {
        username:"",
        password:""
      }
    },
    methods:{
      login(){
        let loginName = {
          name:this.username,
          password:this.password,
        };
         this.$http.delete("http://localhost:3004/user?id=1")

           .then((response)=>{
              console.log(response.body);
           })
      }
    }
  }
</script>
<style></style>
